<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>发起流程</span>
      </div>
      <el-col :span="18" :offset="3">
        <div class="form-conf" v-if="vformOpen">
          <v-form-render :key="new Date().getTime()"
                         :form-json="vformJson"
                         :form-data="vformData"
                         :option-data="voptionData" ref="vFormRef">
          </v-form-render>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="cancel">重置</el-button>
        </div>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import {getProcessForm, startProcess} from '@/api/workflow/process'
import Parser from '@/utils/generator/parser'

export default {
  name: 'WorkStart',
  components: {
    Parser
  },
  data() {
    return {
      definitionId: null,
      deployId: null,
      formOpen: false,
      formData: {},

      vformOpen: false,
      vformJson: {},
      vformData: {},
      voptionData: {},

    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.deployId = this.$route.params && this.$route.params.deployId;
      this.definitionId = this.$route.query && this.$route.query.definitionId;
      getProcessForm({
        definitionId: this.definitionId,
        deployId: this.deployId
      }).then(res => {
        if (res.data) {
          let resData = res.data;
          this.vformJson = JSON.parse(resData.formFields);
          this.vformOpen = true
        }
      })
    },
    submit(data) {
      if (data && this.definitionId) {
        // 启动流程并将表单数据加入流程变量
        startProcess(this.definitionId, JSON.stringify(data.valData)).then(res => {
          this.$modal.msgSuccess(res.msg);
          this.$tab.closeOpenPage({
            path: '/work/own'
          })
        })
      }
    },
    submitForm() {
      let data = this.vformData;
      if (data && this.definitionId) {
        this.$refs.vFormRef.getFormData().then((result) => {
          startProcess(this.definitionId, JSON.stringify(result)).then(res => {
            this.$modal.msgSuccess(res.msg);
            this.$tab.closeOpenPage({
              path: '/work/own'
            })
          })
        })
      }
    },
    cancel() {

    }
  }
}
</script>

<style lang="scss" scoped>
.form-conf {
  margin: 15px auto;
  width: 80%;
  padding: 15px;
}
</style>
